import { useGetState } from '@/hooks/useRedux'
import {
    changeFixedHeader,
    changeGreyModel,
    changeOneParentMenu,
    changeShowFooter,
    changeSidebarWidth,
    changeTheme,
    changeTritanopeModel,
    onResetSettings,
    SettingInitialState,
    Theme,
} from '@/redux/slices/setting.slice'
import { Row, Col, InputNumber, Radio, RadioChangeEvent, Switch, Button, message } from 'antd'
import { useDispatch } from 'react-redux'
import LanguageChoice from './languageChoice'
import { debounce } from 'lodash'

export default function SettingForm() {
    // 表单
    const useSettingForm = () => {
        // 改变主题
        const onChangeTheme = (e: RadioChangeEvent) => {
            const theme = e.target.value as Theme
            dispatch(changeGreyModel(false))
            dispatch(changeTritanopeModel(false))
            dispatch(changeTheme(theme))
        }

        // 改变菜单宽度
        const onChangeSideWidth = (value: number | null) => {
            dispatch(changeSidebarWidth(value as number))
        }

        // 改变是否固定头部
        const onChangeFixedHeader = (value: boolean) => {
            dispatch(changeFixedHeader(value))
        }

        // 改变是否固定头部
        const onChangeShowFooter = (value: boolean) => {
            dispatch(changeShowFooter(value))
        }

        // 改变色弱模式
        const onChangeTritanopeModel = (value: boolean) => {
            dispatch(changeGreyModel(false))
            dispatch(changeTritanopeModel(value))
        }

        // 改变灰色模式
        const onChangeGreyModel = (value: boolean) => {
            dispatch(changeTritanopeModel(false))
            dispatch(changeGreyModel(value))
        }

        // 改变菜单聚焦
        const onChangeOneParentMenu = (value: boolean) => {
            dispatch(changeOneParentMenu(value))
        }

        // 清理缓存
        const onClearCache = () => {
            localStorage.clear()
            sessionStorage.clear()
            message.success('缓存清理成功')
        }

        return {
            onChangeTheme,
            onChangeSideWidth,
            onChangeFixedHeader,
            onChangeShowFooter,
            onChangeTritanopeModel,
            onChangeGreyModel,
            onChangeOneParentMenu,
            onClearCache,
        }
    }

    const dispatch = useDispatch()
    const setting = useGetState<SettingInitialState>('setting')
    const {
        onChangeTheme,
        onChangeSideWidth,
        onChangeFixedHeader,
        onChangeShowFooter,
        onChangeTritanopeModel,
        onChangeGreyModel,
        onChangeOneParentMenu,
        onClearCache,
    } = useSettingForm()

    return (
        <div className="setting-form">
            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>系统语言：</label>
                </Col>
                <Col>
                    <LanguageChoice />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>系统主题：</label>
                </Col>
                <Col className="color-picker">
                    <Radio.Group onChange={onChangeTheme} value={setting.theme}>
                        <Radio value="light">标准</Radio>
                        <Radio value="dark">暗黑</Radio>
                    </Radio.Group>
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>菜单宽度：</label>
                </Col>
                <Col>
                    <InputNumber min={180} max={400} value={setting.sidebarWidth} onChange={onChangeSideWidth} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>固定头部：</label>
                </Col>
                <Col>
                    <Switch checked={setting.fixedHeader} onChange={onChangeFixedHeader} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>显示页脚：</label>
                </Col>
                <Col>
                    <Switch checked={setting.showFooter} onChange={onChangeShowFooter} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>色弱模式：</label>
                </Col>
                <Col>
                    <Switch checked={setting.tritanopeModel} onChange={onChangeTritanopeModel} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>灰色模式：</label>
                </Col>
                <Col>
                    <Switch checked={setting.greyModel} onChange={onChangeGreyModel} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle">
                <Col>
                    <label>菜单聚焦：</label>
                </Col>
                <Col>
                    <Switch checked={setting.oneParentMenu} onChange={onChangeOneParentMenu} />
                </Col>
            </Row>

            <Row className="form-item" justify="space-between" align="middle" gutter={[16, 16]}>
                <Col span={24}>
                    <Button block type="primary" ghost onClick={debounce(() => dispatch(onResetSettings()), 3000, { leading: true, trailing: false })}>
                        恢复/重置
                    </Button>
                </Col>
                <Col span={24}>
                    <Button block type="primary" danger onClick={debounce(onClearCache, 1000, { leading: true, trailing: false })}>
                        清理缓存
                    </Button>
                </Col>
            </Row>
        </div>
    )
}
